<template>
	<view>
		<view class="head">
			<!-- <image class='img' mode="widthFix" :src="info.image"></image> -->
			<swiper class="img imgsBanner_swiper" :current='currentIndex' @change='changCurrent' circular="true">
				<swiper-item v-for="(item,index) in info.images" :key='index'>
					<image class="imgsBanner_swiper" :src="item"></image>
				</swiper-item>
			</swiper>
			<view class="c_box">
				<view class="flex">
					<view class="title">{{info.name}}</view>
				</view>
				<view>{{info.jj}}</view>
			</view>
		</view>
		
		<view class="content">
			<view class="c_name">详情</view>
			<rich-text :nodes="info.content"></rich-text>
		</view>
		
		<view :class="[system=='ios'?'tcs':'tc']"></view>
		
		<view :class="['bottom_box',system=='ios'?'pm':'']">
			<view class="btn" @click="openMap()">导航</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import lPainter from '@/uni_modules/lime-painter/components/lime-painter/'
	const app = getApp().globalData;
	const {
		imgRemote
	} = app;
	export default{
		data(){
			return{
				info:{},
				system:'',
				imgRemote: imgRemote,
				swip:{}
			}
		},
		onLoad(e) {
			if(e.id){
				this.getInfo(e.id);
			}
			this.system = uni.getSystemInfoSync().platform;
		},
		methods:{
			openMap() {
				let _ = this;
				uni.openLocation({
					name:_.info.name,
					address:_.info.site,
					latitude: Number(_.info.wd),
					longitude: Number(_.info.jd),
					complete(res) {
						console.log(res)
					}
				})
			},
			getInfo(id){
				this.$get(this.$api.dpinfo,{id:id},res=>{
					let {code,data}=res.data;
					if(code==1){
						this.swip = res.data.data
						if(data.content){
							
							data.content = this.$formatRichText(data.content).replace(/src="\//g,
								'src="' + getApp().globalData
								.imgRemote + '/');
						}
						
						this.info=data;
						console.log(this.swip)
						console.log('完整接口数据:', this.info)
						
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 15rpx;
		background-color: white;
		// display: flex;
		margin-bottom: 30rpx;
	}
	.img{
		width: 100%;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}
	
	.flex{
		display: flex;
		align-items: center;
	}
	.title{
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.num_box{
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	.num{
		font-size: 24rpx;
		color: #A1A1A1;
		margin-left: 15rpx;
	}
	.label_box{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.label{
		font-size: 24rpx;
		margin: 15rpx 10rpx 0 0;
		background-color:#F7ECE4;
		color:#EF8200;
		box-sizing: border-box;
		padding: 6rpx 20rpx;
		border-radius: 10rpx;
	}
	
	.content{
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
		min-height: 60vh;
	}
	.c_name{
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.bottom_box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: white;
	    box-sizing: border-box;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-top: 1rpx solid #DDDDDD;
	}
	.btn{
		width: 100%;
		background-color: #EF8200;
		color: white;
		text-align: center;
		box-sizing: border-box;
		padding: 20rpx 0;
		border-radius: 35rpx;
		font-size: 26rpx;
	}
	.pm{
		padding-bottom: 50rpx;
	}
	.tc{
		height: 68px;
	}
	.tcs{
		height: 78px;
	}
	.c_box{
		margin-left: 20rpx;
		.title{
			margin-top: 10rpx;
		}
	}
	.imgsBanner_swiper {  
		width: 100%;
		height: 400rpx;  
	}
</style>